<template>
  <div>
    <m-header :title="title"></m-header>
    <div class="page-content">
      <ul>
        <li v-for="(item, index) in list" :key="index" @click="toDet(item.id)">
          <div class="item-content">
            <img class="u_img" :src="require('../assets/images/tou/' + item.u_img + '.png')" alt="">
            <div class="theme" :class="'sub-bg' + item.type">
              <img class="theme_img" :src="require('../assets/images/biao/b' + item.type + '.png')" alt="">
              <div class="intro">{{item.content}}</div>
            </div>
          </div>
        </li>
      </ul>
			<div class="no_data" v-if="list.length == 0">
				<p>暂无相关数据...</p>
			</div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      title: '我的MImi',
      list: [],
			page: 1,
			pagesize: 30,
			total: 0,
			total_page: 0
    }
  },
  computed: {
  	...mapState(['hasLogin', 'userInfo'])
  },
	methods: {
		toDet(id){
			this.$router.togo('/mimi/mimi_det/' + id);
		},
		// 获取首页数据
		getData(){
			this.$loading.show();
			this.$http.my_mimi({
				token: this.userInfo.token,
				u_id: this.userInfo.id,
				page: 1,
				pagesize: this.pagesize
			}).then((res) => {
				this.$loading.hide();
				console.log(res);
				if(res.code === 0){
					this.list = res.data;
					this.page = 2;
					this.total = res.total;
				} else {
					this.$toast(res.msg);
				}
			})
		},
		upLoad(c_page){
			let params = {
				token: this.userInfo.token,
				u_id: this.userInfo.id,
				page: c_page,
				pagesize: this.pagesize
			}
			this.$http.index(params).then((res) => {
				console.log(res);
				if(res.code === 0){
					this.page = c_page + 1;
					this.total = res.total;
					let list = res.data;
					if(list.length > 0){
						this.list = [...this.list,...list];
					}
				}
			})
		}
	},
	created(){
		var _this = this;
		window.onscroll = function(){
			//变量scrollTop是滚动条滚动时，距离顶部的距离
			var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
			//变量windowHeight是可视区的高度
			var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
			//变量scrollHeight是滚动条的总高度
			var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
			//滚动条到底部的条件
			if(scrollTop+windowHeight==scrollHeight){
				if(_this.total != 0){
					_this.upLoad(_this.page);
				}else{
					console.log('没有更多啦！');
				}
			}
		}
	},
	mounted () {
		this.getData();
  }
}
</script>

<style scoped lang="scss">
@import 'styles/common.scss';
.page-content{
  width: calc(100% - 24px);
  margin-left: 12px;
  margin-bottom: rem(40);
  ul{
    li{
      .item-content{
        .u_img{
          z-index: 2;
          position: relative;
          top: rem(60);
          border-radius: 50%;
          width: rem(120);
          height: rem(120);
          box-shadow: -1px -1px 5px rgba(0,0,0,.1);
        }
        .theme{
          border-radius: rem(10);
          padding: 0 rem(80);
          position: relative;
          height: rem(400);
          display: flex;
          justify-content: center;
          align-items: center;
          .theme_img{
            position: absolute;
            width: rem(300);
            bottom: rem(20);
            right: rem(20);
            opacity: .2;
          }
          .intro{
            position: relative;
            z-index: 3;
            color: #eee;
            font-size: rem(32);
            font-weight: bold;
            line-height: rem(50);
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
        }
      }
    }
  }
}
</style>
